<template>
  <div class="homeLogin">
    <el-row :span="24" class="login-main">
      <el-form :rules="rules" :ref="formRefs" :model="user"  class="login-form">
         <el-form-item prop="userName">
          <el-input placeholder="请输入姓名"  v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item prop="userIDCard">
          <el-input placeholder="请输入身份证号码"  v-model="user.userIDCard"></el-input>
        </el-form-item>
         <el-form-item>
           <el-button class="loginbtn" @click.prevent="confirm">提交</el-button>
         </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  beforeCreate () {
    this.formRefs = 'changePsWordForm'
  },
  data () {
    let checkID = (rule, value, cb) => {
      let reg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/
      if (value) {
        if (!reg18.test(value) && !reg15.test(value)) {
          cb(new Error('身份证号码不对，请重新输入'))
        } else {
          cb()
        }
      } else {
        cb()
      }
    }
    return {
      projectBaseUrl: 'http://218.104.153.143:8089',
      rules: {
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { message: '', trigger: 'change' }
        ],
        userIDCard: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
            { message: '', trigger: 'change' },
             { validator: checkID, trigger: 'blur' }
        ]
      },
      user: {
        userName: '',
        userIDCard: ''
      },
      codeText: '获取验证码',
      codestatus: false,
      verifyObj: {}
    }
  },
  methods: {
    confirm () {
      let that = this
      this.$refs[this.formRefs].validate((valid) => {
        if (valid) {
          that.user.token = this.$store.state.token
          that.$http.post(this.projectBaseUrl + '/numberone-auth/busiUser/modifyUserInfo.shtml', that.user, {
            emulateJSON: true
          }).then((data) => {
            if (data.body.success === '操作成功') {
              that.$message({
                message: '完善资料成功',
                type: 'success',
                duration: 1000,
                showClose: false
              })
              this.$router.push('/user/personData')
            } else {
              that.$message({
                message: data.body.error,
                type: 'error',
                duration: 1000,
                showClose: false
              })
            }
          }, (ne) => {
            that.$message({
              message: '网络错误',
              type: 'error',
              duration: 1000,
              showClose: false
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
  .homeLogin{
    font-size: 12px;
    .el-form-item{
      margin:0
    }
    .login-head{
      color:#fff;
      div{
        height: 201px;
        background: url('../../assets/imgs/bg.png') center center no-repeat;
        background-size: cover;
        p{
          font-size: 14px;
        }
        p:first-of-type{
          font:700 16px/80px "微软雅黑";
          margin-bottom: 15px;
        }
        span{
          float: right;
          font-size: 14px;
          font-weight: 700;
          position: absolute;
          right: 10px;
          top: 30px;
          display: inline-block;
          width: 50px;
          line-height: 20px;
        }
        .registerRow {
          display: flex;
          .register {
            display: inline-block;
            width: 50px;
            font-weight: 700;
            font-size: 14px;
            position: absolute;
            right: 10px;
          }
        }
      }
    }
    .login-main{
      margin-top: 10px;
      .el-form-item__error{
        left: 10%
      }
      input{
        width: 90%;
        height: 44px;
        border-radius: 20px;
        text-indent: 34px;
        margin-bottom: 20px;
      }
      .icon-num{
            font-size: 20px;
            color: #bfcbd9;
            position: absolute;
            top: 12px;
            left: 36px;
      }
      .icon-code{
          font-size: 29px;
          color: #bfcbd9;
          position: absolute;
          top: 7px;
          left: 39px;
      }
      .codebtn{
        color:#fff;
        width: 25%;
        height: 44px;
        background-color: #499E41;
        border-radius: 0 20px 20px 0;
        margin-left: -20px;
        border: none;
      }
      .code-input{
        width: 75%;
        float: left;
        margin-left: 5px;
      }
      .code-input input{
        width: 100%;
      }
      .loginbtn{
        width: 90%;
        height: 44px;
        background-color: #499E41;
        margin-top: 30px;
        border-radius: 20px;
        color:#fff;
        font-size: 16px;
      }
    }
  }
</style>
